<template>
    <li class="displayFlex">
        <div class="item-left">
           <p class="blue font16">{{nian}}</p>
           <p class="grey font14">/</p>
           <p class="grey font14">{{yueri}}</p>
        </div>
        <div class="item-right flex1">
            <p class="font18" @click="goPage(item.newsId)">{{item.newsTitle}}</p>
            <div class="displayFlex alignCenter">
                <div class="img-box" v-if="item.newsPic">
                    <img :src="item.newsPic" alt="">
                </div>
                <div class="content grey9 font14">
                    {{item.newsSummary}}
                </div>
            </div>
        </div>
    </li>
</template>
<script>
export default {
    props:{
        item:{
            type:Object,
            data:()=>({})
        }
    },
    data(){
        return {
            nian:"",
            yueri:"",
        }
    },
    created() {
        this.nain = this.item.newsReleaseTime.slice(0,4)
        this.yueri = this.item.newsReleaseTime.slice(5,10)
    },
    methods:{
      goPage(id){
        this.$router.push({
          path:'/notification/detail',
          query:{
            id:id
          }
        })
      }
    }
}
</script>
<style scoped>
p{
    margin:0;
}
.item-left{
    width:50px;
    text-align:center;
    margin-right:20px;
}
.item-left p {
    line-height:100%;
    margin-bottom:4px;
}
li{
    width:49%;
    margin-bottom:36px;
}
.item-right>p{
    line-height:20px;
    margin-bottom:10px;
    cursor: pointer;
}
.item-right>p:hover{
    color:#2590F4;
}
.item-right .content{
    line-height:22px;
}
.img-box{
    width:160px;
    height:90px;
    overflow: hidden;
    margin-right:20px;
}
.img-box img{
  display: block;
  width:100%;
  height:100%;
  max-height:90px;
}
</style>
